<template>
  <a-tree-select
      v-model:value="value"
      show-search
      style="width: 100%"
      :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"

      @select="select"
      @treeExpand="treeExpand"
      @dropdownVisibleChange="dropdownVisibleChange"
      :tree-data="treeData"
      allow-clear
      placeholder="类别/标签"
  >
<!--    <template #title="{ value: val, title }">-->
<!--      <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>-->
<!--      <template v-else>{{ title }}</template>-->
<!--    </template>-->
  </a-tree-select>
</template>

<script setup>

import {ref, watch} from "vue";
import request from "@/utils/request";
import {useStore} from "vuex";

const value = ref();
const treeData = ref([]);
const store=useStore()


const select=(value)=>{
  console.log(value)
  if (value.includes('-')){
    request.get("essay/getset/bylabel/"+value.split('-')[1]).then(res=>{
      console.log("bylabel",res)
      store.commit("setSearchSet",res.data)
    })
  }else {
    request.get("essay/getset/bycategory/"+value).then(res=>{
      console.log("bycategory",res)
      store.commit("setSearchSet",res.data)
    })
  }
}

const dropdownVisibleChange = (o) => {
  console.log(o)
  if (o){
    request.get("category/getlist").then(res => {
      console.log(res)
      treeData.value=[]
      for (let item in res.data){
        treeData.value.push({
          title:res.data[item],
          value:res.data[item],

          children:[{title:res.data[item]+'无标签',value:res.data[item]+'无标签'}]
        })
      }
      console.log(treeData.value)
    })
  }

}

const treeExpand=(expandedKeys)=>{
  // console.log(expandedKeys[0])
  request.get("label/get/bycategory/"+expandedKeys[0]).then(res=>{
    // console.log(res.data)
    treeData.value.filter((p)=>{
      if (p.title===expandedKeys[0]){
        p.children=[]
        for (let item in res.data){
          p.children.push({
            title:res.data[item].label,
            value:expandedKeys[0]+'-'+res.data[item].label
          })
        }
      }
    })
  })
}

</script>
